<template>
	<view class="info">
		<view class="current pt-re">
			<view class="left" @click="back"></view>
			<view class="own" >数据统计概况</view>
			<view class="protect">清晰数据，准确把控</view>	
		</view>
		<view class="info-main">
			<view class="info-title">
				<image src="/static/my/small.jpg" mode=""></image>
				<text>数据概况</text>
			</view>
			<view class="info-nav">
				<view class="info-list" v-for="(i,index) in stateList" :key="i.id">
					<view class="">
						<image :src="i.iconUrl" mode=""></image>
					</view>
					<view class="">
						<view class="info-listT" >
							{{i.title}}
						</view>
						<view class="info-listC">
							{{i.count}}
							<view class="">
								<view class="" style="font-size: 20rpx;margin: 2rpx;" v-if="i.title == '装机量'">
									/兆瓦
								</view>
								<view class="" style="font-size: 20rpx;margin: 2rpx;" v-else-if="i.title == '付款总金额'">
									/元
								</view>
								<view class="" style="font-size: 20rpx;margin: 2rpx;" v-else>
									/个
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
			

		</view>
		
	</view>
</template>

<script>
	import wxLoginPopup from '@/pages/my/wx-login-popup.vue';
	import {
		wxLogin,
		getWxPhone,
		upRegister,
		getUser,
		jobList,
		profile,
		dataOverview,
	} from '@/request/api.js';
	import {
		log
	} from 'util';
	import moment from 'moment';
	export default {
		props: {
			userInfo: {
				type: Object,
				default: null
			},
			userData: null
		},
		components: {
			wxLoginPopup
		},
		data() {
			return {
				stateList:[{
					id: 3,
					title: '项目数量',
					iconUrl: '/static/my/t1.png',
				},{
					id: 2,
					title: '装机量',
					iconUrl: '/static/my/t2.png',
				},{
					id: 1,
					title: '已获取备案数量',
					iconUrl: '/static/my/t3.png',
				},{
					id: 4,
					title: '已获取备案接入批复',
					iconUrl: '/static/my/t4.png',
				},{
					id: 5,
					title: '已支付数量',
					iconUrl: '/static/my/t5.png',
				},{
					id: 6,
					title: '付款总金额',
					iconUrl: '/static/my/t6.png',
				},{
					id: 7,
					title: '建设中数量',
					iconUrl: '/static/my/t7.png',
				},{
					id: 8,
					title: '已暂停数量',
					iconUrl: '/static/my/t8.png',
				}],
				userCode: null,
				show: false,
				showPop: false,
				mobile: '',
				showSex: false,
				showPosition: false,
				formData: {
					bio: '',
					project_position: '请选择职位',
					nickname: '',
					gender:'请选择性别',
					birthday:'请选择出生日期',
				},
				value1:Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				showAge: false,
				titleText:'',
				positions:[],
			}
		},
		onLoad(options){
			if(options){
				this.titleText = options.type
			}
			this.getUser()
			this.getJobList()
			this.getDataOverview()
		},
		onShow(){
			
		},
		methods: {
			getDataOverview(){
				dataOverview().then(res => {
					var keys = Object.keys(res.data);
					// console.log(keys,'keys')
					this.stateList = this.stateList.map((item,index) => {
						return {
							...item,
							count: res.data[keys[index]]
						}
					})
					// console.log(this.stateList,'this.stateList')
				})
			},
			changePosition(){
				this.showPosition = true;
			},
			// 获取个人信息
			getUser(){
				getUser().then(res => {
					this.pageckForIn(this.formData,res.data)
				})
			},
			pageckForIn(ar1,ar2){
				Object.keys(ar1).forEach(key => {
					ar1[key] = ar2[key]
				})
				return ar1
			},
			// 获取职位
			getJobList(e) {
				jobList().then(res => {
					this.positions = res.data.map(item => {
						return{
							...item,
							name: item.job_name,
						}
					})
				})
			},
			changeGender(){
				this.showSex = true;
				// hideKeyboard()
			},
			changeAge(){
				this.showAge = true;
			},
			sexSelect(e) {
				this.formData.gender = e.name
			},
			positionSelect(e){
				this.formData.project_position = e.name
			},
			ageSelect(e){
				this.formData.birthday = moment(e.value).format('YYYY-MM-DD')
				this.showAge = false
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			refuse() {
				uni.clearStorageSync('token')
				this.show = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			/* 个人信息 */
			jumpPage() {
				this.titleText = 'edit'
				// uni.navigateTo({
				// 	url: '/my_pages/myInfo/myInfo?type = edit'
				// })
			},
			changeMes(){
				console.log(this.formData,'this.formData')
				if (this.formData.nickname == '') return uni.$u.toast('请输入姓名')
				if (this.formData.gender == '') return uni.$u.toast('请选择性别')
				if (this.formData.birthday == '') return uni.$u.toast('请选择出生日期')
				if (this.formData.project_position == '') return uni.$u.toast('请选择职位')
				if (this.formData.bio == '') return uni.$u.toast('请输入个人简介')
				profile(this.formData).then(res => {
					uni.$u.toast(res.msg)
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/my/my'
						})
					},2000)
					
					// 	if (res.code == 1) {
					// 		uni.navigateTo({
					// 			url: '/my_pages/components/success?title=个人信息已保存成功'
					// 		})
					// 	}
					// })
				})
				// .catch(errors => {
				// 	uni.$u.toast('请正确填写信息')
				// })
			},
			/* 登录 */
			getPhoneNumber(e) {
				getWxPhone({
					code: e.detail.code
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.mobile = res.data.mobile
						this.showPop = true
					}
					/* this.getWxUserinfo() */
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 16rpx;
		height: 38rpx;
		position: fixed;
		top: 116rpx;
		left: 30rpx;
		background: url(../../static/my/left.png);
		background-repeat:no-repeat;
	}
	.center{
		position: fixed;
		top: 110rpx;
		left: 40%;
	}
	.own{
		position: absolute;
		top: 260rpx;
		left: 11%;
		color: #47578E;
		font-size: 40rpx;
		font-weight: 500;
	}
	.protect{
		position: absolute;
		top: 320rpx;
		left: 11%;
		font-size: 26rpx;
		color: #47578E;
	}
	.info{
		background: #f7f8f6;
		position: relative;
		min-height: 100vh;
	}
	.info-main{
		width: 88%;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: -100rpx;
		.info-nav{
			display: flex;
			flex-wrap: wrap;
			font-size: 28rpx;
			.info-list{
				// border: 1px solid gray;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				width: 49%;
				height: 120rpx;
				margin-bottom: 50rpx;
				image{
					width: 100rpx;
					height: 80rpx;
					margin-right: 15rpx;
				}
				.info-listT{
					color: #081738;
					font-family: 'PingFang HK'
					
				}
				.info-listC{
					color: #47578E;
					height: 40rpx;
					display: flex;
					line-height: 40rpx;
				}
				
			}
		}
		.info-title{
			height: 66rpx;
			width: 100%;
			margin: 0 auto;
			margin-top: 30rpx;
			border-bottom: 2rpx solid #CAD3FA;;
			line-height: 66rpx;
			padding: 6rpx 4rpx 0rpx 0rpx;
			display: flex;
			margin-bottom: 60rpx;

			image{
				width: 40rpx;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 4rpx;
			}
			text{
				color: #47578E;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 36rpx;
				height: 36rpx;
				margin-left: 14rpx;
				margin-top: 4rpx;
			}
		}
	}
	.mes1,.mes2,.mes3{
		// position: absolute;
		width: 700rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 10px;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		margin: 15rpx 0;

		.u-form-item{
			border: 0.5px solid rgba(217, 217, 217, 0.6);
		}
	}
	.mes2{
		top: 692rpx;
	}
	.mes3{
		top: 1000rpx;
		height: 340rpx;
	}
	.btn{
		width: 90%;
		// position: absolute;
		height: 92rpx;
		left: 30rpx;
		top: 1480rpx;
		bottom: 30rpx;
		background: #47578E;
		opacity: 0.8;
		padding: 13px 30px;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
		border-radius: 30px;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	button::after {
		border: none;
	}

	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}

	button {
		background-color: transparent;
		color: #fff;
	}

	.RealName {
		display: flex;
		background: #fff;
		z-index: 1;
		margin: 160rpx 30rpx;
		align-items: center;
		border-radius: 15px;

		.left {
			padding: 15rpx;
			flex: 1;
		}

		.authe {
			margin-right: 15rpx;
		}

		.tip {
			color: #979797;
			margin-top: 8rpx;
			margin-bottom: 8rpx;
			font-size: 26rpx;
		}
	}

	.empty {
		background-color: #f1f1f1;
	}

	.login {
		font-size: 42upx;
	}

	.iName-phone {
		padding: 15upx 20upx;
		height: 140upx;
		font-size: 28rpx;
		color: #09173A;
	}

	.iName {
		color: #FFFFFF;
		padding: 5rpx 20rpx;
		font-size: 32rpx;
	}

	.userInfo {
		position: absolute;
		top: 150upx;
		color: #fff;
		width: 100%;
		padding: 0 30upx;
	}

	.icon-setup {
		width: 30upx;
		height: 30upx;
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
	}

	.avatar {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.phone {
		width: 134rpx;
		margin-left: 20rpx;
		display: flex;
		color: rgba(255, 255, 255, 0.8);;
		background: rgba(186, 186, 186, 0.1);
		padding: 5rpx 20rpx;
		border-radius: 28rpx;
		font-size: 24rpx;
		padding: 5rpx 20rpx;
	}

	.top-img {
		right: 0;
		top: 0;
		width: 360upx;
		height: 360upx;
		z-index: 9;
	}

	.current {
		background: url();
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 556rpx;
		background-repeat: no-repeat;
		// padding: 5rpx 20rpx;
	}

	.arcbottom {
		// width: 200%;
		// position: relative;
		// height: 300upx;
		// background-color: $common-color;
		// border-bottom-left-radius: 140%;
		// border-bottom-right-radius: 140%;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>
